<template>
    <div class="app-container">
        <!-- Header 区域 -->
        <CartHeader></CartHeader>

        <!-- 商品 Item 项组件 -->
        <CartItem v-for="item in list" :key="item.id" :item="item"></CartItem>

        <!-- Footer 区域 -->
        <CartFooter></CartFooter>
    </div>
</template>

<script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'
import {mapState} from 'vuex'

export default {
    name: 'App',
    components: {
        CartHeader,
        CartFooter,
        CartItem
    },
    computed: {
        ...mapState('cart', ['list'])
    },
    created() {
        this.$store.dispatch('cart/getList')
    }
}
</script>

<style lang="less" scoped>
.app-container {
    padding: 50px 0;
    font-size: 14px;
}
</style>
